<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  a {
    text-decoration: none;
  }

  .home_div {
    width: 70%;
    height: 85%;
    margin: auto;
    margin-top: 3%;
    padding: 2% 5%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, .2);
  }

  #message {
    height: 100vh;
  }
</style>

<body>
  <div id="message">
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item><span style="font-size: 20px; font-weight: 700;">宠物仁爱医院管理端</span></el-menu-item>
      <el-menu-item><a href="./home.html">首页</a></el-menu-item>
      <el-menu-item><a href="./user.html">会员管理</a></el-menu-item>
      <el-menu-item><a href="./goods.html">商品管理</a></el-menu-item>
      <el-menu-item><a href="./order.html">订单管理</a></el-menu-item>
      <el-menu-item><a href="./userinfo.html">个人信息</a></el-menu-item>
      <el-menu-item><a href="./message.html">留言管理</a></el-menu-item>
      <el-menu-item><a href="./contact.html">联系我们</a></el-menu-item>
      <el-menu-item><a href="./login.html">退出登录</a></el-menu-item>
    </el-menu>
    <div class="home_div">
      <h3>留言管理</h3>
      <div style="display: flex; margin: 1% 0;">
        <el-input v-model="name" placeholder="请输入留言的主题" style="width: 400px;"></el-input>
        <el-button plain @click="search()">搜索</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="id" width="100">
        </el-table-column>
        <el-table-column prop="title" label="留言主题" width="100">
        </el-table-column>
        <el-table-column prop="message" label="留言信息">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status != '已读'" size="mini" @click="handleUpdate(scope.row)">已读</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 1%;">
        <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
          @current-change="currentPage" :page-size="6">
        </el-pagination>
      </div>
    </div>

    <!-- 删除弹窗 -->

    <el-dialog title="删除" :visible.sync="dialogVisible" width="30%">
      <span>你确定要删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="userDelete()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<script>
  new Vue({
    el: '#message',
    data() {
      return {
        name: '',
        dialogVisible: false,
        current: 1,
        total: 1,
        deleteId: 0,
        tableData: []
      };
    },
    created() {
      // 要先确保用户已经登录
      if (localStorage.getItem("userId") == null) {
        // 表示没有登录，跳转到登录页面
        window.location.href = './login.html';
        return;
      }
      this.page_init();
    },
    methods: {
      // 修改修改状态
      async handleUpdate(row) {
        console.log(row);
        const { data: result } = await this.$http.get('http://localhost:8082/message/updateStu/' + row.id);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.updateStatus();
      },
      // 确认删除
      async userDelete() {
        const { data: result } = await this.$http.get('http://localhost:8082/message/delete/' + this.deleteId);
        if (result.flag) {
          this.$message.success(result.message)
        } else {
          this.$message.error(result.message)
        }
        this.page_init();
        this.dialogVisible = false;
      },
      // 删除
      handleDelete(row) {
        // 打开弹窗
        this.dialogVisible = true;
        // 赋值需要删除的用户id
        this.deleteId = row.id;
        console.log(this.deleteId);
      },
      // 搜索
      async search() {
        // 判断用户是否有输入数据
        if (this.name == "") {
          // 相当于刷新页面
          this.page_init();
        }
        const { data: result } = await this.$http.get('http://localhost:8082/message/search/' + this.name + '/' + this.current);
        if (result.flag) {
          // 搜索的数据
          this.tableData = result.list;
          // 当前页面
          this.current = result.current;
          // 总条数
          this.total = result.total;
        }
      },
      // 判断修改状态之后怎么进行刷新
      updateStatus() {
        if (this.name == "") {
          // 当不搜索的时候，会调用这个方法
          this.page_init();
        } else {
          // 当搜索的时候会调用这个方法
          this.search();
        }
      },
      // 当切换页面时调用
      currentPage(val) {
        this.current = Number(val);
        if (this.name == "") {
          // 当不搜索的时候，会调用这个方法
          this.page_init();
        } else {
          // 当搜索的时候会调用这个方法
          this.search();
        }
      },
      // 刷新页面
      async page_init() {
        const { data: result } = await this.$http.get('http://localhost:8082/message/page/' + this.current);
        if (result.flag) {
          // 赋值数据
          this.tableData = result.list;
          // 当前页面
          this.current = result.current;
          // 总页面
          this.total = result.total;
        } else {
          this.$message.error(result.message)
        }
      }
    }
  })
</script>

</html>